var PageSetting = function () {
  var template = /* html */ `
    <div class="page-setting">
      <el-form label-width="auto" size="medium">
        <el-form-item label="纸张尺寸">
          <el-select v-if="updateSize" v-model="pageSize.pageText" class="setting-input">
            <el-option v-for="item in sizeList" :key="item.value" :value="item.value" :label="item.label">
            </el-option>
          </el-select>
          <span v-else>{{i18n.getMsg('produceOrder.pageSize.'+pageSize.pageText)}}</span>
        </el-form-item>
        <el-form-item label="纸张布局">
          <el-select v-if="updateSize" v-model="pageSize.pageDirection" class="setting-input">
            <el-option v-for="item in directionList" :key="item.value" :value="item.value" :label="item.label">
            </el-option>
          </el-select>
          <span v-else>{{i18n.getMsg('produceOrder.direction.'+pageSize.pageDirection)}}</span>
        </el-form-item>
        <el-form-item label="颜色物料信息">
          <el-switch v-model="showConfig.materialColorBom" active-text="显示" inactive-text="不显示" active-color="#409EFF" inactive-color="#F56C6C">
          </el-switch>
        </el-form-item>
        <el-form-item label="物料信息">
          <el-switch v-model="showConfig.materialBom" active-text="显示" inactive-text="不显示" active-color="#409EFF" inactive-color="#F56C6C">
          </el-switch>
        </el-form-item>
        <el-form-item label="工程图">
          <el-switch v-model="showConfig.projectImg" active-text="显示" inactive-text="不显示" active-color="#409EFF" inactive-color="#F56C6C">
          </el-switch>
        </el-form-item>
        <el-form-item label="自定义表格">
          <el-switch v-model="showConfig.otherTable" active-text="显示" inactive-text="不显示" active-color="#409EFF" inactive-color="#F56C6C">
          </el-switch>
        </el-form-item>
      </el-form>
      <div style="text-align:center">
        <el-button type="primary" size="medium" @click="ensure">确定</el-button>
      </div>
    </div>
  `;

  return {
    props: {
      config: {
        type: Object,
        required: true
      },
      updateSize: {
        type: Boolean,
        default: true
      }
    },

    data: function () {
      var config = this.config;
      var pageSize = config.pageSize;
      if (pageSize === null) {
        pageSize = {
          pageText: '',
          pageDirection: ''
        };
      } else {
        pageSize = _.cloneDeep(pageSize);
      }
      return {
        pageSize: pageSize,
        showConfig: _.cloneDeep(config.showConfig),
        sizeList: i18n.getDropDown('produceOrder.pageSize', ['A3', 'A4']),
        directionList: i18n.getDropDown('produceOrder.direction', ['vertical', 'horizontal'])
      };
    },

    methods: {
      ensure: function () {
        var pageSize = this.pageSize;
        var code = this.checkValid(pageSize);
        if (code !== '') {
          var msg = i18n.getMsg(`produceOrder.error.${code}`);
          this.$alert(msg, '信息');
          return;
        }

        this.config.pageSize = pageSize;
        this.config.showConfig = this.showConfig;
        this.$emit('setting-success');
      },

      checkValid: function (pageSize) {
        if (pageSize.pageText === '') {
          return 'pageText';
        }

        if (pageSize.pageDirection === '') {
          return 'pageDirection';
        }
        return '';
      }
    },

    template: template
  };
}();
